import React from "react";
import {Table} from "antd";
import findup from 'findup-element';
import {ResizableBoxComp} from 'jh-lib'

const ResizeableTitle = props => {
    const {onResize, onResizeStop, onResizeStart, width, colInd, ...restProps} = props;

    if (!width) {
        return <th {...restProps} />;
    }

    const onResizeStartFunc = (e, data) => {

        let tableDom = findup(e.target, (parent) => ('TABLE' === parent.tagName));
        if (tableDom) {
            let colgroup = tableDom.getElementsByTagName('colgroup');

            if (colgroup && colgroup[0] && colgroup[0].childNodes && colgroup[0].childNodes[colInd]) {
                // 要将 table > colgroup > col 的 width 设置为 auto，才能拖动表头
                let colLen = colgroup[0].childNodes.length;
                let colDom = colgroup[0].childNodes[colInd];
                colDom.style.width = 'auto';

                // forEach(colgroup[0].childNodes, (colNode, ind) => {
                //     if (ind !== colLen - 1) {
                //         colNode.style.width = 'auto';
                //     }
                // })

            }
        }

        onResizeStart && onResizeStart(e, data);
    };

    return (
        <ResizableBoxComp
            colInd={colInd}
            width={width}
            height={0}
            axis="x"
            handle={(resizeHandle) => <span
                className={`react-resizable-handle react-resizable-handle-${resizeHandle}`}
                onClick={e => {
                    e.stopPropagation();
                    e.preventDefault();
                }}
            />
            }
            resizeHandles={['right' === restProps.fixed ? 'w' : 'e']}
            onResizeStart={onResizeStartFunc}
            onResize={onResize}
            onResizeStop={onResizeStop}
            draggableOpts={{enableUserSelectHack: false}}
        >
            {({width}) => (
                <th
                    {...restProps}
                    style={restProps.style ? {...restProps.style, width} : {width}}
                />
            )}
        </ResizableBoxComp>
    );
};

export default class Demo extends React.Component {
    state = {
        columns: [
            {
                title: "Date",
                dataIndex: "date",
                width: 200,
                // fixed: 'left'
            },
            {
                title: "Amount",
                dataIndex: "amount",
                width: 100,
                sorter: (a, b) => a.amount - b.amount
            },
            {
                title: "Type",
                dataIndex: "type",
                width: 100
            },
            {
                title: "Note",
                dataIndex: "note",
            },
            {
                width: 100,
                // fixed: 'right',
                title: "Action",
                key: "action",
                render: () => <a onClick={() => {
                    console.log('a')
                }}>Delete</a>
            }
        ]
    };

    components = {
        header: {
            cell: ResizeableTitle
        }
    };

    handleResize = index => (e, {size}) => {
        // console.log("handleResize", e);
        e.stopPropagation();
        e.preventDefault();

        this.setState(({columns}) => {
            const nextColumns = [...columns];
            nextColumns[index] = {
                ...nextColumns[index],
                width: size.width
            };
            return {columns: nextColumns};
        });
    };

    render() {
        const data = [];
        for (let i = 0; i < 100; i++) {
            data.push({
                key: i + 1,
                date: "2018-04-11",
                amount: i + 1,
                type: "income",
                note: "transfer"
            });
        }
        let scrollX = 0;
        const columns = this.state.columns.map((col, index) => ({
            ...col,
            onHeaderCell: column => ({
                width: column.width,
                colInd: index,
                fixed: column.fixed,
                onResizeStop: this.handleResize(index)
            })
        }));

        return (
            <Table
                bordered
                // pagination={false}
                components={this.components}
                columns={columns}
                dataSource={data}
                scroll={{y: 300}}
            />
        );
    }
}

// ReactDOM.render(<Demo />, document.getElementById("container"));
